<template>
  <div>
    <n-card>
      <n-form
        ref="formRef"
        inline
        :model="model"
        label-placement="left"
        :size="size"
        label-width="80px"
        require-mark-placement="right-hanging"
      >
        <n-form-item label="用工形式" style="width: 250px">
          <n-select
            v-model:value="model.labor_type"
            placeholder="请选择用工形式"
            :options="option.labor_type"
          />
        </n-form-item>
        <n-form-item label="人员档级" style="width: 250px">
          <n-select v-model:value="model.grade" placeholder="请选择档级" :options="option.grade" />
        </n-form-item>
        <n-form-item label="项目" style="width: 250px">
          <n-select v-model:value="model.pname" placeholder="请选择项目" :options="option.pname" />
        </n-form-item>
        <n-form-item label="性别" style="width: 250px">
          <n-select v-model:value="model.sex" placeholder="请选择性别" :options="option.sex" />
        </n-form-item>
        <n-button @click="toggle" type="info">展开</n-button>
      </n-form>

      <n-form inline label-placement="left" label-width="80px" v-show="data.show1">
        <n-form-item label="年龄" style="width: 250px">
          <n-select v-model:value="model.age" placeholder="请选择年龄" :options="option.age" />
        </n-form-item>
        <n-form-item label="学历" style="width: 250px">
          <n-select
            v-model:value="model.education"
            placeholder="请选择学历"
            :options="option.education"
          />
        </n-form-item>
        <n-form-item label="人员状态" style="width: 250px">
          <n-select
            v-model:value="model.status"
            placeholder="请选择人员状态"
            :options="option.status"
          />
        </n-form-item>
        <n-button type="info" @click="search">搜索</n-button>
        <n-button type="warning" style="margin-left: 20px" @click="reset">重置</n-button>
        <n-button type="success" style="margin-left: 20px" @click="importexcel">导出</n-button>
      </n-form>
      <n-data-table
        :columns="columns"
        id="lists777"
        :row-key="rowKey"
        @update:checked-row-keys="handleCheck"
        :pagination="paginationReactive"
        :data="data.data"
        striped
      />
      <!-- 详情 弹窗  开始-->
      <n-modal
        v-model:show="data.show"
        :mask-closable="false"
        preset="dialog"
        title="个人信息详情"
        style="width: 960px; height: 550px"
      >
        <n-form
          ref="formRef"
          :model="model"
          :rules="rules"
          label-placement="left"
          require-mark-placement="right-hanging"
          :size="size"
          :style="{
            maxWidth: '960px',
          }"
        >
          <div style="display: flex; flex-wrap: wrap; justify-content: space-between">
            <n-form-item label="姓名 :" path="inputValue" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.name"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder="姓名"
              />
            </n-form-item>

            <n-form-item label="姓别 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.sex"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder="姓别"
              />
            </n-form-item>

            <n-form-item label="民族 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.national"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="身份证号 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.id_number"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="出生年月 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.birth_date"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="年龄 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.age"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="政治面貌 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.landscape"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="电话 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.tel"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="学历 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.education"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="所在项目 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.pname"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="毕业时间 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.graduation_date"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="毕业学校 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.school"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="所学专业 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.major"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="所在公司 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.qname"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="入职时间 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.entry_time"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="参加工作时间 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.worker_date"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <!-- 通过条件判断，动态数据显示 -->
            <!-- <div v-if="userinfo_alert.sex_=='男'">
                                              <n-form-item label="所在档级 :"  :label-width="110">
                                                <n-input v-model:value="userinfo_alert.worker_date"  :readonly="true" style="width: 180px;height: 34px;" placeholder="" />
                                              </n-form-item>
                                           </div> -->

            <n-form-item label="工作岗位 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.jobs"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="用工形式 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.labor_type"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>

            <n-form-item label="人员状态 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.status"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder=""
              />
            </n-form-item>
            <n-form-item label="所在档级 :" :label-width="110">
              <n-input
                v-model:value="暂无数据"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder="暂无接口数据"
              />
            </n-form-item>

            <n-form-item label="档级调整时间 :" :label-width="110">
              <n-input
                v-model:value="暂无数据"
                :readonly="true"
                style="width: 180px; height: 34px"
                placeholder="暂无接口数据"
              />
            </n-form-item>

            <n-form-item label="家庭住址 :" :label-width="110">
              <n-input
                v-model:value="userinfo_alert.address"
                :readonly="true"
                style="width: 400px; height: 34px"
                placeholder=""
              />
            </n-form-item>
          </div>
        </n-form>
      </n-modal>
      <!-- 详情 弹窗  结束-->
    </n-card>
  </div>
</template>
<script>
  import { h, reactive, ref, defineComponent, getCurrentInstance } from 'vue';
  import { NButton, useMessage } from 'naive-ui';
  import table2excel from 'js-table2excel';
  export default defineComponent({
    setup() {
      let { proxy } = getCurrentInstance();
      const message = useMessage();
      const formRef = ref(null);
      const paginationReactive = reactive({
        page: 1,
        pageSize: 5,
        showSizePicker: true,
        pageSizes: [3, 5, 7],
        onChange: (page) => {
          paginationReactive.page = page;
        },
        onUpdatePageSize: (pageSize) => {
          paginationReactive.pageSize = pageSize;
          paginationReactive.page = 1;
        },
      });
      const data = reactive({
        data: [],
        tabledata: [],
        show: false,
        show1: false,
        alldata: [],
      });
      const model = reactive({
        labor_type: '',
        grade: '',
        pname: '',
        sex: '',
        age: '',
        education: '',
        status: '',
      });
      const createColumns = ({ sendMail_1 }) => {
        return [
          {
            type: 'selection',
          },
          {
            title: 'id',
            key: 'id',
          },
          {
            title: '姓名',
            key: 'name',
          },

          {
            title: '性别',
            key: 'sex',
          },
          {
            title: '年龄',
            key: 'age',
          },
          {
            title: '联系电话',
            key: 'tel',
          },
          {
            title: '所在公司',
            key: 'qname',
          },
          {
            title: '所在项目',
            key: 'pname',
          },
          {
            title: '工作岗位',
            key: 'jobs',
          },
          {
            title: '用工形式',
            key: 'labor_type',
          },
          {
            title: '人员状态',
            key: 'status',
          },
          {
            title: '操作',
            key: 'actions',
            // align:"right",
            titleColSpan: data.data.user_status == 4 ? 1 : 3,
            width: 1,
            render(row) {
              return h(
                NButton,
                {
                  size: 'small',
                  color: 'green',
                  // align:"center",
                  onClick: () => sendMail_1(row),
                },
                {
                  default: () => '详情',
                }
              );
            },
          },
        ];
      };
      const option = reactive({
        labor_type: [
          {
            label: '长期派遣',
            value: '长期派遣',
          },
          {
            label: '短期派遣',
            value: '短期派遣',
          },
          {
            label: '学员',
            value: '学员',
          },
        ],
        grade: [
          {
            label: '一档',
            value: '一档',
          },
          {
            label: '二档',
            value: '二档',
          },
          {
            label: '三档',
            value: '三档',
          },
          {
            label: '四档',
            value: '四档',
          },
          {
            label: '五档',
            value: '五档',
          },
          {
            label: '六档',
            value: '六档',
          },
          {
            label: '七档',
            value: '七档',
          },
          {
            label: '八档',
            value: '八档',
          },
          {
            label: '九档',
            value: '九档',
          },
          {
            label: '十档',
            value: '十档',
          },
          {
            label: '十一档',
            value: '十一档',
          },
          {
            label: '十二档',
            value: '十二档',
          },
        ],
        pname: [
          {
            label: '未处理',
            value: 0,
          },
          {
            label: '处理中',
            value: 1,
          },
          {
            label: '已处理',
            value: 2,
          },
          {
            label: '已取消',
            value: 3,
          },
        ],
        sex: [
          {
            label: '男',
            value: '男',
          },
          {
            label: '女',
            value: '女',
          },
        ],
        age: [
          {
            label: '20-30',
            value: '20-30',
          },
          {
            label: '30-40',
            value: '30-40',
          },
          {
            label: '40-50',
            value: '40-50',
          },
          {
            label: '50-60',
            value: '50-60',
          },
        ],
        education: [
          {
            label: '文盲',
            value: '文盲',
          },
          {
            label: '小学',
            value: '小学',
          },
          {
            label: '初中',
            value: '初中',
          },
          {
            label: '高中',
            value: '高中',
          },
          {
            label: '大专',
            value: '大专',
          },
          {
            label: '本科',
            value: '本科',
          },
          {
            label: '硕士',
            value: '硕士',
          },
          {
            label: '博士',
            value: '博士',
          },
          {
            label: '博士后',
            value: '博士后',
          },
        ],
        status: [
          {
            label: '在职',
            value: '在职',
          },
          {
            label: '离职',
            value: '离职',
          },
        ],
      });
      const userinfo_alert = reactive({});
      function load() {
        proxy
          .$axios({
            url: '/api/api/Staff/staff_info',
            method: 'post',
            data: {
              admin_id: 111,
              admin_name: '张',
              sign: 3,
            },
          })
          .then((res) => {
            console.log(res);
            data.data = res.data.info;
            data.alldata = res.data.info;
          });
      }
      load();
      // 多维搜索 目前完成性别、人员状态、用工形式、所在项目、学历、年龄
      function search() {
        let arr = [];
        for (let i = 0; i < data.alldata.length; i++) {
          if (
            String(data.alldata[i].sex).indexOf(model.sex) != -1 &&
            String(data.alldata[i].status).indexOf(model.status) != -1 &&
            String(data.alldata[i].labor_type).indexOf(model.labor_type) != -1 &&
            String(data.alldata[i].pname).indexOf(model.pname) != -1 &&
            String(data.alldata[i].education).indexOf(model.education) != -1
          ) {
            if (model.age == '') {
              arr.push(data.alldata[i]);
            } else {
              if (model.age == '20-30' && data.alldata[i].age >= 20 && data.alldata[i].age < 30) {
              } else if (
                model.age == '30-40' &&
                data.alldata[i].age >= 30 &&
                data.alldata[i].age < 40
              ) {
                arr.push(data.alldata[i]);
              } else if (
                model.age == '40-50' &&
                data.alldata[i].age >= 40 &&
                data.alldata[i].age < 50
              ) {
                arr.push(data.alldata[i]);
              } else if (
                model.age == '50-60' &&
                data.alldata[i].age >= 50 &&
                data.alldata[i].age < 60
              ) {
                arr.push(data.alldata[i]);
              }
            }
          }
        }
        console.log(arr);
        data.data = arr;
      }
      function reset() {
        model.sex = '';
        model.status = '';
        model.labor_type = '';
        model.pname = '';
        model.education = '';
        model.age = '';
        load();
      }
      function importexcel() {
        let excelName = '人员统计表';
        let column = [
          {
            title: 'id',
            key: 'id',
          },
          {
            title: '姓名',
            key: 'name',
          },
          {
            title: '性别',
            key: 'sex',
          },
          {
            title: '民族',
            key: 'national',
          },
          {
            title: '政治面貌',
            key: 'landscape',
          },
          {
            title: '出生年月',
            key: 'birth_date',
          },
          {
            title: '年龄',
            key: 'age',
          },
          {
            title: '身份证号码',
            key: 'id_number',
          },
          {
            title: '联系电话',
            key: 'tel',
          },
          {
            title: '住址',
            key: 'address',
          },
          {
            title: '参加工作时间',
            key: 'worker_date',
          },
          {
            title: '入职时间',
            key: 'entry_time',
          },
          {
            title: '学历',
            key: 'education',
          },
          {
            title: '毕业院校',
            key: 'school',
          },
          {
            title: '所学专业',
            key: 'major',
          },
          {
            title: '毕业时间',
            key: 'graduation_date',
          },
          {
            title: '所在项目',
            key: 'pname',
          },
          {
            title: '工作岗位',
            key: 'jobs',
          },
          {
            title: '用工形式',
            key: 'labor_type',
          },
          {
            title: '人员状态',
            key: 'status',
          },
          {
            title: '所在公司',
            key: 'qname',
          },
        ];
        if (data.tabledata.length == 0) {
          message.error('您未选中导出项');
        } else {
          table2excel(column, data.tabledata, excelName);
          message.success('导出成功');
          data.tabledata = [];
        }
      }
      var flag = true;
      function toggle() {
        if (flag) {
          data.show1 = true;
          flag = false;
        } else {
          data.show1 = false;
          flag = true;
        }
      }
      return {
        toggle,
        userinfo_alert,
        search,
        reset,
        importexcel,
        option,
        formRef,
        model,
        data,
        load,
        paginationReactive,
        rowKey: (row) => row,
        handleCheck(rowKeys) {
          console.log(rowKeys);
          data.tabledata = rowKeys;
        },
        columns: createColumns({
          sendMail_1(rowData) {
            console.log(rowData);
            data.show = true;
            userinfo_alert.name = rowData.name;
            userinfo_alert.sex = rowData.sex;
            userinfo_alert.national = rowData.national;
            userinfo_alert.landscape = rowData.landscape;
            userinfo_alert.birth_date = rowData.birth_date;
            userinfo_alert.age = rowData.age;
            userinfo_alert.id_number = rowData.id_number;
            userinfo_alert.tel = rowData.tel;
            userinfo_alert.address = rowData.address;
            userinfo_alert.worker_date = rowData.worker_date;
            userinfo_alert.entry_time = rowData.entry_time;
            userinfo_alert.education = rowData.education;
            userinfo_alert.school = rowData.school;
            userinfo_alert.major = rowData.major;
            userinfo_alert.graduation_date = rowData.graduation_date;
            userinfo_alert.pname = rowData.pname;
            userinfo_alert.jobs = rowData.jobs;
            userinfo_alert.labor_type = rowData.labor_type;
            userinfo_alert.status = rowData.status;
            userinfo_alert.qname = rowData.qname;
          },
        }),
      };
    },
  });
</script>

<style scoped></style>
